<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃鸡练习</title>
</head>

<body>
    <div>
        <button id="btn1">将吃鸡放到所有城市后面</button>
        <button id="btn2">将吃鸡放到所有城市前面</button>
        <button id="btn3">将吃鸡放到上海的后面</button>
        <button id="btn4">将吃鸡放到上海的前面</button>
        <button id="btn5">删除北京</button>
        <button id="btn6">删除所有节点</button>
    </div>
    <ul>
        <li id="beijing">北京</li>
        <li id="shanghai">上海</li>
        <li id="zhengzhou">郑州</li>
        <li id="chiji">吃鸡</li>
        <li id="wangzherongyao">王者荣耀</li>
    </ul>
</body>
<script>
    let cj = document.getElementById('chiji').parentNode;
    let chiji = document.getElementById('chiji');
    let btn1=document.getElementById("btn1");
    let btn2=document.getElementById("btn2");
    let btn3=document.getElementById("btn3");
    let btn4=document.getElementById("btn4");
    let btn5=document.getElementById("btn5");
    let btn6=document.getElementById("btn6");

    btn1.addEventListener("click",function(){
        let wangzherongyao=document.getElementById("wagzherongyao");
        cj .insertBefore(chiji, wangzherongyao);
    })
    
    btn2.addEventListener("click",function(){
        cj.insertBefore(chiji, cj.firstChild)
    })

    btn3.addEventListener("click",function(){
        let zhengzhou=document.getElementById("zhengzhou")
        cj .insertBefore(chiji,zhengzhou)
    })

   
    btn4.addEventListener("click" ,function (){
        let shanghai = document.getElementById('shanghai');
        cj.insertBefore(chiji, shanghai);
    })

    btn5.addEventListener("click",function(){
        let beijing = document.getElementById('beijing');
        try {
            cj.removeChild(beijing);
        } catch (e) {
            console.log(e);
        }
    })

    btn6.addEventListener("click",function(){
        while (cj.firstChild) {
            cj.removeChild(cj.firstChild);
        }
    })
</script>

</html>